<template>
  <div class="app">
      <h3 class="title">首页</h3>
      <to-search></to-search>
      <hr>
      <h3 class="cate">分类</h3>
      <div class="box">
    <div class="item" v-for="(item,index) in cates" :key="index">
        <router-link :to="'/list?id='+item.id">{{item.catename}}</router-link>
    </div>
    <hr>
    <h3 class="title">猜你喜欢-商品</h3>
    <div class="item" v-for="(item) in goods" :key="item.id">
      <router-link :to="'/detail/'+item.id">{{item.name}}</router-link>
    </div></div>
  </div>
</template>

<script>
import {reqHomeCates} from "../../http/http"
export default {
    data(){
        return {
            cates:[],
            goods:[
        {id:11,name:"SK2神仙水"},
        {id:22,name:"SK2前男友面膜"},
        {id:33,name:"雅顿金胶"},
        {id:44,name:"欧莱雅小熨斗"}
      ]
        }
    },
methods:{
    search(){
        this.$router.push("/search")
    }
},
mounted(){
    reqHomeCates().then(res=>{
        this.cates=res.data.list
    })
}
}
</script>

<style scoped>
.box{
    margin-bottom: 0.8rem;
}
.item{
  padding: 0.2rem;
  margin: 0.2rem;
  border: 0.01rem solid #ccc;
  
}
a{
  margin: 0.2rem;
  display: inline-block;
}

.cate{
    height:0.4rem;
    line-height: 0.4rem;
    font-size: 0.4rem;
    color: #ff4400;
    padding-left: 0.2rem;
}
</style>